<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .nav li {
            list-style: none;
            font-size: 17px;
            color: #f4f1de;
        }
        
        .left {
            height: 60px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .leftnav {
            display: flex;
            justify-content: center;
        }
        
        .button {
            background-color: #173760;
            width: 125px;
            height: 65px;
            text-align: center;
            /* 行高 */
            line-height: 65px;
            /* 过渡时长 */
            transition: .3s;
            cursor: pointer;
        }
        
        .information {
            width: 125px;
            background-color: #e07a5f;
            /* transform: translate(-20px,-200px); */
            border-radius: 10px;
            padding: 0px 0;
            line-height: 0;
            height: 0;
            transition: .3s;
            opacity: 0;
        }
        
        .information {
            opacity: 1;
            line-height: 65px;
            transform: translate(0px, 0px);
            height: auto;
        }
        
        .button:hover {
            background-color: #d15a39;
        }
        
        .button li:hover {
            background-color: #ffb29d;
        }
        
        .button ul li {
            height: 0;
            transition: .2s;
            opacity: 0;
            transform: translateY(-65px);
            background-color: #e07a5f;
        }
        
        .button:hover li {
            height: 65px;
            opacity: 1;
            transform: translateY(0);
        }
        
        /* .information {
            opacity: 1;
            line-height: 65px;
            transform: translate(0px, 0px);
            height: auto;
        } */
    </style>
</head>

<body>
    <div class="nav">
        <div class="nav1">
            <!-- <span class="半圆1"></span> -->
            <div class="nav2" allign="center">
                <img src="软件学院图标.gif" height="140px">
            </div>

            <!-- <span class="半圆2" ></span> -->
            <div class="left">
                <ul class="leftnav">
                    <li class="button">
                        <span>学院首页</span>
                        <ul class="information">
                            <li>学院首页</li>
                        </ul>
                    </li>
                    <li class="button"> <span>学院概况</span>
                        <ul class="information">
                            <li>学院简介</li>
                            <li>领导集体</li>
                            <li>机构设置</li>
                            <li>联系我们</li>
                        </ul>
                    </li>
                    <li class="button"> <span>师资力量</span>
                        <ul class="information">
                            <li>软件工程教研室</li>
                            <li>管理系统教研室</li>
                            <li>网络数字与媒体</li>
                        </ul>

                    </li>
                    <li class="button"><span>本科生教育</span>
                        <ul class="information">
                            <li>教务通知</li>
                            <li>专业介绍</li>
                            <li>人才培养</li>
                            <li>教学成果</li>
                            <li>毕业设计</li>
                            <li>软件工作室</li>
                            <li>精品课程</li>
                        </ul>
                    </li>
                    <li class="button"> <span>研究生教育</span>
                        <ul class="information">
                            <li>招生信息</li>
                            <li>教学管理</li>
                            <li>教学培养</li>
                            <li>导师介绍</li>
                            <li>学科建设</li>
                            <li>学术动态</li>
                            <li>优秀研究生</li>
                            <li>专业硕士</li>
                            <li>联合办学</li>
                        </ul>
                    </li>
                    <li class="button"> <span>学生工作</span>
                        <ul class="information">
                            <li>学工动态</li>
                            <li>通知公告</li>
                            <li>校园文化</li>
                            <li>社团活动</li>
                        </ul>
                    </li>
                    <li class="button">
                        <span>招生就业</span>
                        <ul class="information">
                            <li>就业信息</li>
                            <li>招生信息</li>
                            <li>优秀校友</li>
                            <li>招生宣传片</li>
                        </ul>
                    </li>
                    <li class="button"> <span>校企合作</span>
                        <ul class="information">
                            <li>国际交流</li>
                            <li>企业合作</li>
                            <li>项目合作</li>

                        </ul>
                    </li>
                    <li class="button"> <span>科学研究</span>
                        <ul class="information">
                            <li>科研通知</li>
                            <li>规章制度</li>
                            <li>相关下载</li>
                            <li>工作动态</li>
                            <li>科研活动</li>
                        </ul>

                    </li>
                    <li class="button"><span>党团建设</span>
                        <ul class="information">
                            <li>党的建议</li>
                            <li>团的建议</li>

                        </ul>
                    </li>
                    <li class="button"> <span>实验教学中心</span>
                        <ul class="information">
                            <li>中心概况</li>
                            <li>实验思政</li>
                            <li>实验室介绍</li>
                            <li>规章制度</li>
                            <li>社会服务</li>
                            <li>科技创新</li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</body>

</html>